import { IRouteComponentProps } from 'umi';
import { Link } from 'umi';
import React from 'react';

interface NavItem {
  path: string;
  name: string;
}

const logo = require('@/img/dbdIcon.png');

export default (props: IRouteComponentProps) => {
  // 定义导航项
  const navItems: NavItem[] = [
    { path: '/', name: '首页' },
    { path: '/user', name: '用户管理' },
    { path: '/settings', name: '系统设置' },
  ];

  // 保存按钮点击处理函数
  const handleSave = () => {
    try {
      // 触发全局保存事件，让CanvasContainer组件捕获并执行保存操作
      const saveEvent = new CustomEvent('globalSaveCanvas', { bubbles: true });
      window.dispatchEvent(saveEvent);
    } catch (error) {
      console.error('保存操作失败:', error);
      alert('保存失败，请稍后重试');
    }
  };

  // 预览按钮点击处理函数
  const handlePreview = () => {
    try {
      // 触发全局预览事件，让CanvasContainer组件捕获并执行预览操作
      const previewEvent = new CustomEvent('globalPreviewCanvas', {
        bubbles: true,
      });
      window.dispatchEvent(previewEvent);
    } catch (error) {
      console.error('预览操作失败:', error);
      alert('预览失败，请稍后重试');
    }
  };

  return (
    <div
      style={{
        minHeight: '100vh',
        minWidth: '1200px',
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#f5f5f5',
      }}
    >
      {/* 顶部导航栏 */}
      <header
        style={{
          backgroundColor: '#14181b',
          padding: '0 72px',
          height: '64px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.09)',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          {/* logo */}
          <div
            style={{
              fontSize: '20px',
              fontWeight: 'bold',
              color: '#1890ff',
              width: '80px',
              height: '56px',
              background: `url(${logo})`,
              backgroundSize: 'contain', // 等比例缩放图片以适应容器
              backgroundRepeat: 'no-repeat', // 不重复图片
              backgroundPosition: 'center', // 图片居中显示
            }}
          ></div>
          {/* 返回工作台 */}
          <a style={{ color: '#fff', fontWeight: 700 }}>{'< 返回工作台'}</a>
        </div>

        {/* 导航链接 */}
        <nav>
          <ul
            style={{
              listStyle: 'none',
              margin: 0,
              padding: 0,
              display: 'flex',
              gap: '24px',
            }}
          >
            {navItems.map((item) => (
              <li key={item.path}>
                <Link
                  to={item.path}
                  style={{
                    color:
                      props.location.pathname === item.path
                        ? '#1890ff'
                        : '#666',
                    textDecoration: 'none',
                    fontSize: '14px',
                    padding: '8px 0',
                    borderBottom:
                      props.location.pathname === item.path
                        ? '2px solid #1890ff'
                        : 'none',
                    transition: 'all 0.3s ease',
                  }}
                >
                  {item.name}
                </Link>
              </li>
            ))}
          </ul>
        </nav>

        <div>
          {/* 预览按钮 */}
          <button
            style={{
              color: '#fff',
              backgroundColor: '#1890ff',
              padding: '8px 16px',
              borderRadius: '4px',
              border: 'none',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: 700,
              marginRight: 16,
            }}
            onClick={handlePreview}
          >
            预览
          </button>
          {/* 保存按钮 */}
          <button
            style={{
              color: '#fff',
              backgroundColor: '#1890ff',
              padding: '8px 16px',
              borderRadius: '4px',
              border: 'none',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: 700,
            }}
            onClick={handleSave}
          >
            保存
          </button>
        </div>
      </header>

      {/* 主内容区域 - 为左右布局提供合适的容器 */}
      <main
        style={{
          flex: 1,
          backgroundColor: '#f5f5f5',
          overflow: 'hidden',
        }}
      >
        {/* 内容容器 - 确保子组件有足够的空间展示左右布局 */}
        <div
          style={{
            width: '100%',
            height: '100%',
            minHeight: 'calc(100vh - 64px)', // 确保有足够的高度
          }}
        >
          {props?.children}
        </div>
      </main>

      {/* 页脚 */}
      {false && (
        <footer
          style={{
            textAlign: 'center',
            padding: '16px',
            color: '#666',
            fontSize: '14px',
            borderTop: '1px solid #e8e8e8',
          }}
        >
          Bio GDP 系统 © {new Date().getFullYear()}
        </footer>
      )}
    </div>
  );
};
